<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NL4DV | Showcase</title>

    <link rel='shortcut icon' type='image/x-icon' href="static/img/favicon.ico"/>

    <!--Vendor CSS files-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link href="static/css/styles.css" rel="stylesheet">


</head>
<body>
<nav class="navbar navbar-dark bg-dark justify-content-between">
  <a class="navbar-brand">NL4DV | Showcase</a>
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <span class="navbar-brand">Applications</span>
</nav>
<br/>
<div class="container-fluid">
    <div class="card-deck">
        <div class="card card-interactive">
            <a class="link" href="/vleditor" target="_blank">
                <figure class="img-wrapper"><img src="static/img/showcase/teaser-vl-editor.png" class="card-img-top"></figure>
                <div class="card-body">
                    <h5 class="card-title">Vega-Lite Editor</h5>
                    <p class="card-text">A natural language interface for specifying and editing Vega-Lite charts that shows how NL4DV's visualization recommendations can help novices get started with Vega-Lite.</p>
                </div>
            </a>
        </div>
        <div class="card card-interactive">
            <a class="link" href="/datatone" target="_blank">
                <div class="img-wrapper"><img src="static/img/showcase/teaser-datatone.png" class="card-img-top"></div>
                <div class="card-body">
                    <h5 class="card-title">DataTone</h5>
                    <p class="card-text">A sample application illustrating how NL4DV can be used to recreate ambiguity widgets originally presented in the DataTone system developed by Gao et al.</p>
                </div>
            </a>
        </div>
        <div class="card card-interactive">
            <a class="link" href="/mmplot" target="_blank">
                <figure class="img-wrapper"><img src="static/img/showcase/teaser-mmplot.png" class="card-img-top"></figure>
                <div class="card-body">
                    <h5 class="card-title">MMPlot</h5>
                    <p class="card-text">A multimodal interface that allows interacting with scatter plots through touch and speech. This example illustrates how NL4DV can be used to augment existing interactions in a visualization system with voice.</p>
                </div>
            </a>
        </div>
        <div class="card">
            <figure class="img-wrapper"><img src="static/img/showcase/teaser-jupyter-notebook.png" class="card-img-top"></figure>
            <div class="card-body">
                <h5 class="card-title">Jupyter Notebook</h5>
                <p class="card-text">For creating visualizations in Python without needing to learn about Python-based visualization packages.</p>
                <p class="card-text"><small class="text-muted">Follow <a href="https://nl4dv.github.io/nl4dv/showcase.html" target="_blank">this</a> for setup instructions.</small></p>
                <p></p>
            </div>
        </div>
    </div>
</div>
<br/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <span class="navbar-brand">Debuggers</span>
</nav>
<br/>
<div class="container-fluid">
    <div class="card-deck">
        <div class="card card-interactive">
            <a class="link" href="/debugger_single" target="_blank">
                <figure class="img-wrapper"><img src="static/img/showcase/teaser-debugger-single.png" class="card-img-top"></figure>
                <div class="card-body">
                    <h5 class="card-title">Debugger: Single Query</h5>
                    <p class="card-text">A debugging interface that breaks down NL4DV's output and highlights the underlying query interpretation logic.</p>
                </div>
            </a>
        </div>
        <div class="card card-interactive">
            <a class="link" href="/debugger_batch" target="_blank">
                <div class="img-wrapper"><img src="static/img/showcase/teaser-debugger-batch.png" class="card-img-top"></div>
                <div class="card-body">
                    <h5 class="card-title">Debugger Batch Query</h5>
                    <p class="card-text">An extension to the Debugger, it enables the analysis of outputs of multiple queries at once.</p>
                </div>
            </a>
        </div>
        <div class="card card-interactive">
            <a class="link" href="/test_queries" target="_blank">
                <figure class="img-wrapper"><img src="static/img/showcase/teaser-test-queries.png" class="card-img-top"></figure>
                <div class="card-body">
                    <h5 class="card-title">Test Queries</h5>
                    <p class="card-text">An interface to explore NL4DV's output on different types of queries such as underspecified and fullyspecified.</p>
                </div>
            </a>
        </div>
        <div class="card">
            <a class="link" href="/vis_matrix" target="_blank">
                <figure class="img-wrapper"><img src="static/img/showcase/teaser-vis-matrix.png" class="card-img-top"></figure>
                <div class="card-body">
                    <h5 class="card-title">VIS Matrix</h5>
                    <p class="card-text">An interface to understand the base Visualization recommendations for different Attribute combinations such as QxN, QxNxN, etc. </p>
                </div>
            </a>
        </div>
    </div>
</div>
</body>

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

</html>
